<template>
  <div class="welcome-container">
    <div class="hero-section">
      <div class="hero-content">
        <div class="logo-wrapper">
          <div class="logo-animation">
            <div class="circle"></div>
            <div class="circle circle-2"></div>
            <i class="el-icon"><Document /></i>
          </div>
        </div>
        <h1>
          <span class="gradient-text">协作表格</span>
          <div class="subtitle">让团队协作更高效</div>
        </h1>
        <p class="description">
          实时多人协作 · 智能公式计算 · 数据可视化 · 即时通讯
        </p>
        <div class="action-buttons">
          <el-button type="primary" size="large" @click="router.push('/login')">
            开始使用
            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
          <el-button size="large">
            查看演示
            <el-icon class="el-icon--right"><VideoPlay /></el-icon>
          </el-button>
        </div>
      </div>
      
      <div class="features-grid">
        <div v-for="(feature, index) in features" 
             :key="feature.title"
             class="feature-card"
             :style="{ animationDelay: `${index * 0.1}s` }">
          <div class="feature-icon">
            <el-icon><component :is="feature.icon" /></el-icon>
          </div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </div>
    </div>

    <div class="floating-shapes">
      <div v-for="i in 6" :key="i" 
           class="shape"
           :style="getRandomStyle()">
      </div>
    </div>

    <div class="stats-section">
      <div v-for="stat in stats" :key="stat.label" class="stat-item">
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-label">{{ stat.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
  Document,
  ArrowRight,
  VideoPlay,
  Share,
  DataLine,
  ChatDotSquare,
  Connection,
  TrendCharts,
  Lock
} from '@element-plus/icons-vue';

const router = useRouter();

const features = [
  {
    icon: 'Share',
    title: '实时协作',
    description: '多人同时编辑,变更实时同步,告别来回传文件'
  },
  {
    icon: 'DataLine',
    title: '数据分析',
    description: '强大的公式功能,让数据处理更轻松'
  },
  {
    icon: 'ChatDotSquare',
    title: '即时沟通',
    description: '内置即时通讯,讨论更便捷'
  },
  {
    icon: 'Connection',
    title: '团队协作',
    description: '文件共享、权限管理,团队协作更高效'
  },
  {
    icon: 'TrendCharts',
    title: '数据可视化',
    description: '丰富的图表类型,数据展示更直观'
  },
  {
    icon: 'Lock',
    title: '安全可靠',
    description: '数据加密存储,保障信息安全'
  }
];

const stats = [
  { value: '100,000+', label: '活跃用户' },
  { value: '1,000,000+', label: '协作文档' },
  { value: '99.9%', label: '服务可用性' },
  { value: '24/7', label: '技术支持' }
];

const getRandomStyle = () => {
  const size = Math.random() * 100 + 50;
  const top = Math.random() * 100;
  const left = Math.random() * 100;
  const hue = Math.random() * 360;
  
  return {
    width: `${size}px`,
    height: `${size}px`,
    top: `${top}%`,
    left: `${left}%`,
    background: `hsla(${hue}, 70%, 70%, 0.1)`,
    animationDuration: `${Math.random() * 20 + 10}s`
  };
};
</script>

<style scoped lang="scss">
.welcome-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
  
  .hero-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    position: relative;
    z-index: 1;
    
    .hero-content {
      text-align: center;
      margin-bottom: 80px;
      
      .logo-wrapper {
        margin-bottom: 40px;
        
        .logo-animation {
          width: 120px;
          height: 120px;
          margin: 0 auto;
          position: relative;
          
          .circle {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 30px;
            background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
            animation: pulse 2s ease-in-out infinite;
            
            &-2 {
              opacity: 0.5;
              animation-delay: -1s;
            }
          }
          
          .el-icon {
            position: relative;
            font-size: 48px;
            color: white;
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: bounce 2s ease-in-out infinite;
          }
        }
      }
      
      h1 {
        font-size: 64px;
        margin: 0 0 20px;
        
        .gradient-text {
          background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          position: relative;
          
          &::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            background: linear-gradient(135deg, #43a047 0%, #81c784 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0.5;
            filter: blur(40px);
            transform: translateY(20px);
          }
        }
        
        .subtitle {
          font-size: 24px;
          color: #558b2f;
          margin-top: 8px;
          font-weight: normal;
        }
      }
      
      .description {
        font-size: 20px;
        color: #666;
        margin-bottom: 40px;
      }
      
      .action-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
        
        .el-button {
          padding: 0 40px;
          height: 50px;
          font-size: 18px;
          border-radius: 25px;
          
          &--primary {
            background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
            border: none;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 15px rgba(67, 160, 71, 0.3);
            }
          }
        }
      }
    }
    
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      
      .feature-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        transition: all 0.3s;
        animation: fadeInUp 0.5s ease-out forwards;
        opacity: 0;
        
        &:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          
          .feature-icon {
            transform: scale(1.1) rotate(10deg);
            background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
            
            .el-icon {
              color: white;
            }
          }
        }
        
        .feature-icon {
          width: 80px;
          height: 80px;
          margin: 0 auto 20px;
          background: #f1f8e9;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s;
          
          .el-icon {
            font-size: 36px;
            color: #43a047;
          }
        }
        
        h3 {
          color: #2e7d32;
          font-size: 24px;
          margin: 0 0 10px;
        }
        
        p {
          color: #666;
          margin: 0;
          line-height: 1.6;
        }
      }
    }
  }
  
  .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    .shape {
      position: absolute;
      border-radius: 50%;
      animation: float 20s infinite linear;
    }
  }
  
  .stats-section {
    background: white;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    gap: 80px;
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        font-size: 48px;
        font-weight: 700;
        color: #2e7d32;
        margin-bottom: 8px;
      }
      
      .stat-label {
        color: #666;
        font-size: 16px;
      }
    }
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(30px, 20px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1) rotate(-10deg);
  }
  50% {
    transform: scale(1.05) rotate(-10deg);
  }
  100% {
    transform: scale(1) rotate(-10deg);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 